<style lang="less">
  @import '../../styles/common.less';
</style>
<style>
  .model-info-div .button {
    margin-right: 5px;
  }

  .model-info-div .Drawer-body {
    z-index: 999;
  }
</style>
<template>
  <div class="model-info-div" @click="">
    <FormItem :label="title ? title : '关联其他应用'">
      <div class="dataDetail-div padding-0 div-no-border">
        <Button type="primary" icon="md-add" class="button" @click="tipModel(el)"
                v-for="el in modelArr" :key="'btn-'+el.id" v-text="el.title"></Button>
      </div>
    </FormItem>

    <!--任务-->
    <Drawer :closable="false" :width="DrawerWidth" v-model="addTaskTableData" class="Drawer-body"
            @on-close="closeFun">
      <div class="Drawer_pStyle">
        <span>任务</span>
        <span class="del" @click="hideAddModal"><Button type="error" size="small" icon="md-close"></Button></span>
      </div>
      <div class="body">
        <Form label-position="top">
          <FormItem label="标题">
            <Input v-model="addTaskData.title" placeholder="标题"></Input>
          </FormItem>
          <FormItem label="任务描述（可选）">
            <Input v-model="addTaskData.content" type="textarea" class="textarea_resize"
                   :autosize="{minRows: 3}" placeholder="任务描述"></Input>
          </FormItem>
          <FormItem label="优先级">
            <Select v-model="addTaskData.priority" :transfer="true" style="width:100%;">
              <Option v-for="item in priorityArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="预计完成时间">
            <Select v-model="addTaskData.interval_time" :transfer="true" @on-change="onChangeSelect_interval_time"
                    style="width:49%;" :disabled="addTaskData.interval_time_type == 'auto' ? true : false">
              <Option v-for="item in interval_timeArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
            <Select v-model="addTaskData.interval_time_type" :transfer="true"
                    @on-change="onChangeSelect_interval_time_type"
                    style="width:49%; margin-left: 2%;">
              <Option v-for="item in interval_time_typeArr" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="截止时间" v-show="addTaskData.interval_time_type == 'auto'">
            <DatePicker type="datetime"
                        format="yyyy-MM-dd HH:mm:ss"
                        :confirm="true"
                        :transfer="true"
                        :editable="false"
                        placement="bottom-start"
                        placeholder="请选择截止时间"
                        v-model="addTaskData.DatePickerValue"
                        style="width: 100%;"></DatePicker>
          </FormItem>
          <FormItem label="附件（可选）">
            <div class="dataDetail-div chooseUser accessory">
              <div class="users" v-for="el in addTaskData.accessory">
                <span class="span-name" v-text="el.name"></span>
                <span class="span-icon" @click="delAccessory(el)">
                    <Icon type="md-close"/>
                  </span>
              </div>
              <Upload
                :before-upload="handleUpload" action="">
                <Button icon="ios-cloud-upload-outline">选择文件</Button>
              </Upload>
            </div>
          </FormItem>
          <FormItem label="负责人">
            <div class="dataDetail-div">
              <Tree ref="charge_tree" :data="chargeTreeData" @on-select-change="onSelectChange"></Tree>
            </div>
          </FormItem>
          <FormItem label="协作人（可选）">
            <div class="dataDetail-div">
              <Tree ref="cowork_tree" :data="TreeData" show-checkbox multiple></Tree>
            </div>
          </FormItem>
          <FormItem label="知会人（可选）">
            <div class="dataDetail-div">
              <Tree ref="report_tree" :data="reportTreeData" show-checkbox multiple></Tree>
            </div>
          </FormItem>
        </Form>
      </div>
      <div class="footer" :style="{width: DrawerWidth - 32 + 'px'}">
        <Button type="text" @click="hideAddModal">取消</Button>
        <Button type="primary" @click="saveTask()">确定</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import Cookies from 'js-cookie';
  import Util from '../../../libs/util';
  import Utils from '../../../libs/mod.utils';
  import String from '../../../libs/mod.string';
  import Modal from '../../../libs/mod.Modal';
  import Ckeditor from '../../../libs/mod.ckeditor';
  import modelDetailUtils from '../../../libs/vue.modelDetail';
  import util from '@/libs/util.js';
  export default {
    name: 'userInfo',
    components: {},
    props: ['model', 'title', 'isDetail', 'noBorder', 'fid', 'queryData'],
    data () {
      return {
        uid: '',
        back_id: -1,

        modelArr: [],
        modelId: '',

        DrawerWidth: Util.constant.DrawerWidth,// 抽屉的宽度
        WindowWidth: Util.constant.WindowWidth,// 窗口的宽度
        WindowHeight: Util.constant.WindowHeight,// 窗口的高度
        officeappsUrl: Util.constant.officeappsUrl,

        addTaskTableData: false,

        addTaskData: {
          title: '',
          content: '',
          interval_time: '',
          interval_time_type: '',
          DatePickerValue: '',//'2018-06-06 10:10:00'
          priority: '',
          chargeId: '',
          chargeNodes: [],
          accessory: [],
        },
        interval_timeArr: [
          {
            id: '1',
            name: '1',
          },
          {
            id: '2',
            name: '2',
          },
          {
            id: '3',
            name: '3',
          },
          {
            id: '4',
            name: '4',
          },
          {
            id: '5',
            name: '5',
          },
          {
            id: '6',
            name: '6',
          },
          {
            id: '7',
            name: '7',
          },
          {
            id: '8',
            name: '8',
          },
          {
            id: '9',
            name: '9',
          },
          {
            id: '10',
            name: '10',
          },
        ],// 预计需要时间
        interval_time_typeArr: [
          {
            id: 'hour',
            name: '小时',
          },
          {
            id: 'day',
            name: '天',
          },
          {
            id: 'week',
            name: '周',
          },
          {
            id: 'auto',
            name: '自定义',
          },
        ],
        selectionArr: [],
        priorityArr: [
          {
            id: 'normal',
            name: '普通',
          },
          {
            id: 'important',
            name: '重要',
          },
          {
            id: 'fatal',
            name: '紧急',
          }
        ],
        TreeData: [],
        chargeTreeData: [],
        reportTreeData: [],
        report_checked_users_arr: [],//默认知会人
      };
    },
    created: function () {
      var _this = this;
    },
    mounted () {
      var _this = this;
      _this.getModelData();
    },
    watch: {},
    methods: {
      // 关闭添加页后
      closeFun: function () {
        var _this = this;
        _this.hideAddModal();
      },
      hideAddModal: function () {
        let _this = this;
        _this.addTaskTableData = false;
      },
      tipModel: function (queryData) {
        let _this = this;
        queryData['model'] = queryData;
        var type = modelDetailUtils.toModelDetail(_this, queryData, {getModel: true});
        console.log('type=', type);
        if (type) {
          switch (type) {
            case Util.constant.type.task :
              _this.getreportUser();
              _this.addTaskData.title = '';
              _this.addTaskData.content = '';
              _this.addTaskData.interval_time = '';
              _this.addTaskData.interval_time_type = '';
              _this.addTaskData.DatePickerValue = '';
              _this.addTaskData.priority = '';
              _this.addTaskData.chargeId = '';
              _this.addTaskData.chargeNodes = [];
              _this.addTaskData.accessory = [];
              _this.addTaskTableData = true;
              break;
            case Util.constant.type.email :
              var data = {
                type: 'add',
                backid: queryData.id,
                backfrom: Util.constant.type.journal
              };

              break;
            default :
              break;
          }
        }

      },
      // 模块列表
      getModelData: function () {
        var _this = this;
        var data = {};
        var params = {
          url: '/model/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            _this.modelArr = res.data || [];
          } else {
            _this.$Message.destroy();
            _this.$Message.error('获取功能列表失败!');
          }
        }
      },

      // 任务添加
      saveTask: function () {
        let _this = this;
      },
      // 查询默认知会人
      getreportUser () {
        var _this = this;
        _this.report_checked_users_arr = [];
        var data = {};
        var params = {
          url: '/noticer/list',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var _data = res.data || [];
            _this.report_checked_users_arr = _data;
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询上报人失败!');
          }
          _this.getTreeData();
        }
      },
      // 获取选人 树信息
      getTreeData: function () {
        var _this = this;
        var data = {
          uid: Util.toJson(localStorage.getItem('userInfo')).id,
          id: 1
        };
        var params = {
          url: '/department/query',
          type: Util.method.post,
          data: data,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data || [];
            var TreeData = [];
            TreeData.push(data);
            var chargeTreeData = Utils.cloneObj(TreeData);
            var reportTreeData = Utils.cloneObj(TreeData);
            _this.toDataFun(TreeData);
            _this.toDataFuncharge(chargeTreeData);
            _this.toDataFunreport(reportTreeData);
            _this.TreeData = TreeData;
            _this.chargeTreeData = Utils.cloneObj(chargeTreeData);
            _this.reportTreeData = Utils.cloneObj(reportTreeData);
            _this.showFundeps('chargeTreeData', _this.chargeTreeData);//展开树
            _this.showFundeps('TreeData', _this.TreeData);//展开树
            _this.showFundeps('reportTreeData', _this.reportTreeData);//展开树
          } else {
            _this.$Message.destroy();
            _this.$Message.error('查询人员信息失败!');
          }
        }
      },
      // 展开树
      showFundeps: function (type, TreeData) {
        var _this = this;
        TreeData.forEach(function (e) {
          if (e.children && e.children.length > 0) {
            var children = e.children;
            var expand = false;
            for (var k in children) {
              if (!children[k]) {
                continue;
              }
              if (children[k].type == 'dep' && children[k].expand == true) {
                expand = true;
              }
            }
            if (expand == true && e.expand != true) {
              e.expand = true;
              var tree = [];
              switch (type) {
                case 'chargeTreeData' :
                  tree = _this.chargeTreeData;
                  break;
                case 'TreeData' :
                  tree = _this.TreeData;
                  break;
                case 'reportTreeData' :
                  tree = _this.reportTreeData;
                  break;
                case 'depsTreeData' :
                  tree = _this.depsTreeData;
                  break;
                default :
                  break;
              }
              _this.showFundeps(type, tree);
            } else {
              if (e.expand != true) {
                _this.showFundeps(type, children);
              }
            }
          }
        });
      },
      // 负责人 处理树信息
      toDataFuncharge: function (arr) {
        var _this = this;
        arr.forEach(function (e) {
          e.title = e.name;
          if (e.type) {
            e.type = 'dep';
          } else {
            e.type = 'user';
            if (e.id == _this.addTaskData.chargeId) {
              e.selected = true;// 选中
            }
          }
          var staff = e.staff || [];
          var children = e.children || [];
          if (children.length == 0) {
            e.children = [];
          }
          e.children.push(...staff);
          _this.toDataFuncharge(e.children);
        });
      },
      // 协作人 处理树信息
      toDataFun: function (arr) {
        var _this = this;
        arr.forEach(function (e) {
          e.title = e.name;
          //e.expand = true;//展开
          if (e.type) {
            e.type = 'dep';
          } else {
            e.type = 'user';
          }
          var staff = e.staff || [];
          var children = e.children || [];
          if (children.length == 0) {
            e.children = [];
          }
          e.children.push(...staff);
          _this.toDataFun(e.children);
        });
      },
      // 知会人 处理树信息
      toDataFunreport: function (arr) {
        var _this = this;
        arr.forEach(function (e) {
          e.title = e.name;
          //e.expand = true;//展开
          if (e.type) {
            e.type = 'dep';
          } else {
            e.type = 'user';
            var checked_users_arr = _this.report_checked_users_arr;
            if (Utils.idInArray(e.id, checked_users_arr)) {
              e.checked = true;// 选中
            }
          }
          var staff = e.staff || [];
          var children = e.children || [];
          if (children.length == 0) {
            e.children = [];
          }
          e.children.push(...staff);
          _this.toDataFunreport(e.children);
        });
      },

      // 选中负责人
      onSelectChange: function (item) {
        var _this = this;
        if (item.length > 0 && item[0].type == 'user') {
          _this.addTaskData.chargeId = item[0].id;
          _this.addTaskData.chargeNodes = [item[0]];
        } else {
          _this.addTaskData.chargeId = '';
          _this.addTaskData.chargeNodes = [];
          _this.$Message.destroy();
          _this.$Message.error('请选择一个负责人!');
        }
      },
      // 预计使用时间
      onChangeSelect_interval_time: function (val) {
        var _this = this;
        _this.addTaskData.interval_time = val;
      },
      // 预计使用时间
      onChangeSelect_interval_time_type: function (val) {
        var _this = this;
        if (val == 'auto') {
          _this.addTaskData.interval_time = '';
        }
        _this.addTaskData.interval_time_type = val;
      },
      // 选中文件
      handleUpload: function (file) {
        var _this = this;
        _this.UploadFile(file);
        return false;
      },
      // 上传文件
      UploadFile: function (file) {
        var _this = this;
        var formData = new FormData();
        formData.append("file", file);
        var params = {
          url: '/attach/addFile',
          type: Util.method.post,
          data: formData,
          success: _successFun
        };
        Util.ajax(_this, params);
        function _successFun(res) {
          if (res.result == 0) {
            var data = res.data;
            var id = data.id;
            var name = data.name;
            var url = data.url;
            var obj = {
              id: id,
              name: name,
              url: url,
            };
            _this.addTaskData.accessory.push(obj);
          } else {
            _this.$Message.destroy();
            _this.$Message.error('上传失败!');
          }
        }
      },
      // 删除附件
      delAccessory: function (el) {
        var _this = this;
        var id = el.id;
        var accessory = _this.addTaskData.accessory;
        for (var k in accessory) {
          if (!accessory[k]) {
            continue;
          }
          if (id == accessory[k].id) {
            var del = accessory.splice(k, 1);
            break;
          }
        }
        _this.addTaskData.accessory = accessory;
      },

    }
  };
</script>
